import React from "react";
import ReactTypes from "prop-types";

//cnpm i react-router-dom react路由模块安装
// HashRouter 路由的根容器，所有路由相关的都要在这个里面，一个网站只使用一次
// Route 表示路由规则 path components
//Link 表示路由的链接

import { HashRouter, Route, Link, Router } from "react-router-dom";

import Home from "./Home";
import About from "./About";
import Movie from "./Movie";

import { DatePicker } from "antd"; //按需导入

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.initCount, //把外界传递过来的initCount赋值给count，count是可读可写的
    };
  }

  // 默认的静态属性值，只会被执行一次
  static defaultProps = {
    initCount: 0, //默认初始值，如果外界没有传入props的initCount，我们会取用这里的默认initCount的值
  };
  // 校验外界传递过来的数据进行检验
  // 检验传递过来的数据 安装 prop-types 这个包 15.x的react不需要独立安装，是集成在react包中
  static propTypes = {
    initCount: ReactTypes.number, //类型校验
  };
  render() {
    console.log(this.refs.span && this.refs.span.innerHTML);
    return (
      // 把根组件包裹起来，说明已经使用了路由 页面中有一个 #
      //HashRouter 中只能有唯一的一个根元素
      //网站中，只需要使用一次<HashRouter></HashRouter>

      <HashRouter>
        <div className="ml-4" style={{ marginLeft: "40px" }}>
          app根组件
          <hr />
          <Route path="/home" component={Home}></Route>
          <Route path="/movie/:type/:id" component={Movie} exact></Route>
          <Route path="/about" component={About}></Route>
          <hr />
          <Link to="/home">首页</Link>&nbsp;&nbsp;
          {/* react中的路由规则是模糊匹配的 */}
          <Link to="/movie/top250/10">电影</Link>&nbsp;&nbsp;
          <Link to="/about">关于</Link>
          <DatePicker></DatePicker>
          <div>
            <span id="span" ref="span">
              {this.state.count}
            </span>
            <button
              id="btn"
              onClick={() => {
                this.increment();
              }}
            >
              +
            </button>
            <button>-</button>
          </div>
        </div>
      </HashRouter>
    );
  }
  increment() {
    console.log(1);
    this.setState({
      count: this.state.count + 1,
    });
  }
  componentDidMount() {
    // document.getElementById("btn").onclick = () => {
    //   // this 就只按钮本省
    //   // 改成箭头函数， this就指向执行 componentDidMount()的对象
    //   console.log("btn");
    //   this.setState({
    //     count: this.state.count + 1,
    //   });
    //   // this.state.count++; //不能修改props props是只读的
    // };
  }

  // 从这里就进入组件的运行中的状态 这个方法返回 turn or false
  shouldComponentUpdate(nextProps, nextState) {
    // console.log(this.state.count + "----" + nextState.count);
    // // this.state.count 这个值是上一次的旧数据
    // return nextState.count % 2 === 0 ? true : false;
    return true;
  }
  //虚拟DOM和页面上的数据都是旧的
  componentWillUpdate() {
    console.log(
      "componentWillUpdate:" + document.getElementById("span").innerHTML
    );
    console.log(this.refs.span.innerHTML); //vue：this.$refs.span.innerHtml 少$
  }
  //数据和页面上的都是最新的
  componentDidUpdate() {
    console.log("componentDidUpdate:" + this.refs.span.innerHTML);
  }
}
